.card{
	color: var(--txt);
	background: var(--bkg-L2);
	box-shadow: var(--elev-1-shadow);
	

	display: grid;
	grid-template-rows: auto 1fr auto;

	& > header{
		@mixin typo-h3{}; /* This is for inline header, when no h5/h6 */
		display: grid;
		grid-template-columns: 2rem 1fr 1rem;
		padding: 1rem;
		user-select: none;
		align-items: center;

		h2{
			grid-column: 1 / 3;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			display: block;			
		}

		h3{
			@mixin typo-sub1{};
			color: var(--txt-L3);
			grid-column: 1 / 3;
			grid-row: 2;
		}

		c-ico{
			cursor: pointer;
			grid-column: 3;
			grid-row: 1;				
			fill: var(--ico-L4);
			width: 1.25rem;
			height: 1.25rem;
		}

	}

	& > section{
		@mixin typo-body1{};
		padding: 0 1rem 8px 1rem;
	}

	& > footer{
		min-height:  3rem;
		display: flex;
		align-items: center;
		padding: 0 1rem;

		&.split-2{
			display: grid;
			grid-template-columns: 1fr 1fr;

			& > div:nth-child(2){
				display: flex;
				justify-content: flex-end;
				& > *{
					margin-left: 1rem;
				}				
			}

		}
	}

}


.card-add{
	opacity: .2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	background: var(--bdr-lightest);

	border: dashed 3px var(--bdr);
	justify-content: center;
	h3{
		color: black;
	}
	d-ico{
		width: 3rem;
		height: 3rem;
		max-width: 3rem;
		max-height: 3rem;
	}

	&:hover{
		opacity: .5;
	}
}


